<template>
  <div class="content">
    <div class="content-main">
      <div class="nav">
        <el-button-group class="ml-4">
          <el-button
            v-for="item in nav"
            :key="item"
            type="primary"
            size="large"
            color="#364582"
            plain
          >
            {{ item }}
          </el-button>
        </el-button-group>
      </div>
      <div class="search-content">
        <div class="search-left">
          <div class="search-k"></div>
          <div class="search-title">事件查询</div>
        </div>
        <div class="search">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="省份:" label-width="60px" size="defult">
              <el-select
                v-model="formInline.provice"
                placeholder="请选择省份"
                @change="handleChange"
              >
                <el-option label="浙江省" value="浙江省" />
                <el-option label="广东省" value="广东省" />
              </el-select>
            </el-form-item>
            <el-form-item label="市区:" label-width="60px" size="defult">
              <el-select
                v-model="formInline.city"
                placeholder="请选择市区"
                @change="handleChange"
              >
                <el-option label="萧山区" value="萧山区" />
                <el-option label="西湖区" value="西湖区" />
              </el-select>
            </el-form-item>
            <el-form-item label="街道:" label-width="60px" size="defult">
              <el-select
                v-model="formInline.street"
                placeholder="请选择街道"
                @change="handleChange"
              >
                <el-option label="古城街道" value="古城街道" />
                <el-option label="转塘街道" value="转塘街道" />
              </el-select>
            </el-form-item>
            <el-form-item label="关键字:" label-width="60px" size="defult">
              <el-input
                v-model="formInline.value"
                placeholder="请输入关键字 "
                size="defult"
                width="200px"
              />
              <el-button size="small" style="margin-left: 10px;"  @click="handleChange">搜索</el-button>
            </el-form-item>
          

          </el-form>
        </div>
      </div>

      <div class="table">
        <el-table
          :data="list"
          height="1000px"
          :header-cell-style="{
            backgroundColor: '#364582',
            color: '#fff',
          }"
        >
          <el-table-column
            fixed
            prop="eventName"
            label="事件名称"
            width="200"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="name"
            label="事件编号"
            width="200"
            align="center"
          />
          <el-table-column
            prop="eventArea"
            label="事件区域"
            width="300"
            align="center"
          />
          <el-table-column
            label="起始-结束时间"
            width="260"
            align="center"
          >
            <template #default="scope">
              {{timestampToTime(scope.row.checkTimeStart)}}-
              {{timestampToTime(scope.row.checkTimeEnd)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="prosonName"
            label="事件负责人"
            width="200"
            align="center"
          />
          <el-table-column
            prop="team"
            label="巡查小队"
            width="200"
            align="center"
          />
          <el-table-column
            prop="eventType"
            label="事件类型"
            width="200"
            align="center"
          />
          <el-table-column
            prop="abnormal"
            label="是否异常"
            width="200"
            align="center"
          />
          
        </el-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import '@/mock/working.js'
import { workingApi } from '../../../api/api'
import type { valueEquals } from 'element-plus';
const input = ref([])
const list = ref<any>([])
 
const currentPage = ref(1)
const formInline = reactive({
  provice: '',
  city: '',
  street: '',
  keyword: '',
  value:'',
})
const getData = async () => {
  const queryData = { formInline, currentPage: currentPage.value, pageSize: 72 }

  const res = await workingApi(queryData)
  list.value = res.data.result
}
onMounted(() => {
  getData()
})

const handleChange = () => {
  // console.log(formInline);
  // 在这里发送请求，拿到需要查询的表格数据
  //关键字搜索
  getData()
}



function timestampToTime(timestamp: any) {
  var date = new Date(timestamp * 1000) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  const Y = date.getFullYear() + '-'
  const M =
    (date.getMonth() + 1 < 10
      ? '0' + (date.getMonth() + 1)
      : date.getMonth() + 1) + '-'
  const D = date.getDate() + ' '
  return Y + M + D
}

const nav = ref([
  '全部事件',
  '待处理事件',
  '待完结事件',
  '已处理事件',
  '已完成事件',
  '周汇总',
  '月汇总',
  '年汇总',
])
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
  .content-main {
    margin: 30px;
    // background-color: #fff;
    .nav {
      margin-bottom: 20px;
      height: 80px;
      margin-bottom: 20px;

      .el-button {
        display: flex;
        justify-content: space-around;
        width: 12%;
        padding: 0 30px 0 30px;
        height: 75px;
        font-size: 18px;
        font-weight: 600;
      }
    }
    .search-content {
      display: flex;
      height: 80px;
      background-color: #fff;
      line-height: 80px;
      margin-bottom: 20px;
      .search-left {
        display: flex;
        position: relative;

        .search-k {
          width: 10px;
          height: 40px;
          background-color: #364582;
          position: absolute;
          top: 18px;
        }
        .search-title {
          font-size: 20px;
          font-weight: 600;
          padding-left: 20px;
          color: #364582;
        }
      }
      .search {
        padding-left: 30px;
        height: 80px;

        line-height: 95px;
      }
      .el-input {
        width: 180px;

      }
    }

    .table {
      :deep(.el-table__header) {
        height: 60px;
        width: 100% !important;
      }

      :deep(.el-table__body) {
        width: 100% !important;
      }
      :deep(.el-table) {
        // 每行鼠标经过得样式
        font-size: 18px;
        .el-table__body tr:hover > td {
          background-color: #97bbe5 !important;
        }
        // .el-table__body tr.current-row > td {
        //   background-color: red !important;
        // }
      }
    }
  }
}
</style>
